<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">签约分期</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				<view class="details_box">
					<view class="details_title">分期金额</view>
					<view class="input_box">
						<view class="m">￥</view>
						<input type="number" v-model="total_money" placeholder="请输入" placeholder-style="color:#333" />
					</view>
				</view>
				
				<view class="details_box details_boxNo">
					<view class="list" data-type="0" @tap="openPupu">
						<view class="name">选期数</view>
						<view class="text" v-if="month_num > 0">{{month_num}}期</view>
							<view class="text" v-else >请选择分期</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" data-type="1" @tap="openPupu">
						<view class="name">还款计划</view>
						<view class="text" v-if="Object.keys(first_stage).length > 0">首期{{first_stage.bill_date}}日应还￥{{first_stage.money}}</view>
						<view class="text" v-else>请先确定分期数</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" data-type="2" @tap="openPupu">
						<view class="name">选期数</view>
						<view class="text">
							<view class="i">	
							    <block v-if="Object.keys(cur_bank).length > 0" >
									<image :src="'/static/bank0'+cur_bank.img_code+'.png'" mode="widthFix"></image>
								</block>
								<block v-else>
									<image :src="'/static/bank01.png'" mode="widthFix"></image>
								</block>
							</view>
							<view class="t" v-if="Object.keys(cur_bank).length > 0">{{cur_bank.bank_name}}[{{cur_bank.bank_code|end_code}}]</view>
							<view class="t" v-else>请绑定银行卡</view>
						</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
				</view>
				
				<view class="rule_list" @tap="checkedAuto">
					<checkbox style="scale: 0.8;" color="#FF7F22" :checked="checked" ></checkbox>
					<view>我已仔细阅读并同意签署 <text style="color: #999;" :data-url="'/pages/public/art_detail?ori=xy'" @click.stop="gotopage">《自动还款服务协议》</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="confirm sub" :data-url="'/pages/order/successful'" @click="sign_model">确认签约</view>
		
		<!-- 弹窗 -->
		<u-popup :show="pupu" :round="'4vw'" :closeOnClickOverlay="true" @close="close_pupu" mode="bottom" @open="show_pupu">
		    <view class="pupu_box" @click.stop="">

			  <view class="pupu_show">
				<view class="pupu_title" v-if="pupuYype == 0">选择期数</view>
				<view class="pupu_title" v-if="pupuYype == 1">覆约计划</view>
				<view class="pupu_title" v-if="pupuYype == 2">选择银行卡</view>
				<view class="close iconfont icon-guanbi1" @tap.stop="close_pupu"></view>
				<view class="pupu_value">
					<!-- 期数 -->
					<view class="pupu_content" v-if="pupuYype == 0">
						<view class="pupu_period">
										
							<view class="period" :class="0 == select ? 'periodColor' : ''" :data-index="0" :data-num="2" @tap="setPeriod">2期</view>
							<view class="period" :class="1 == select ? 'periodColor' : ''" :data-index="1" :data-num="3" @tap="setPeriod">3期</view>
							<view class="period" :class="2 == select ? 'periodColor' : ''" :data-index="2" :data-num="6" @tap="setPeriod">6期</view>
							<view class="period" :class="3 == select ? 'periodColor' : ''" :data-index="3" :data-num="10" @tap="setPeriod">10期</view>
							<view class="period" :class="4 == select ? 'periodColor' : ''" :data-index="4" :data-num="12" @tap="setPeriod">12期</view>
							<view class="period" :class="5 == select ? 'periodColor' : ''" :data-index="5" :data-num="18" @tap="setPeriod">18期</view>
							<view class="period" :class="6 == select ? 'periodColor' : ''" :data-index="6" :data-num="24" @tap="setPeriod">24期</view>
							<view class="period" :class="7 == select ? 'periodColor' : ''" :data-index="7" :data-num="36" @tap="setPeriod">36期</view>
							<view class="period" :class="8 == select ? 'periodColor' : ''" :data-index="8" :data-num="48" @tap="setPeriod">48期</view>
							
						</view>
						<view class="pupu_menu sub" @click="sure_stage_num">确认</view>
					</view>
					
					<!-- 分期 -->
					<view class="pupu_content" v-if="pupuYype == 1">
						<view class="schedule_box">
							<block v-for="(item, index) in plan_list" :key="index">
								<view class="schedule_list">
									<view class="name_box">
										<view class="name">{{index + 1}}期</view>
										<view class="time">{{item.bill_date}}</view>
									</view>
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="value">￥{{item.money}}</view>
										<view class="time">本金{{item.principal}} ＋ 利息{{item.interest}}</view>
									</view>
								</view>
							</block>
						</view>
						<view class="pupu_menu sub" @click="to_plan_sure">确认</view>
					</view>
					
					<!--  银行 -->
					<view class="pupu_content" v-if="pupuYype == 2">
						<block v-for="(item, index) in bank_list" :key="index">
							<view class="bank_list" :data-index="index" @tap="setBank">
								<view class="icon">
									<image :src="'/static/bank0'+item.img_code+'.png'" mode="widthFix"></image>
								</view>
								<view class="text">{{item.bank_name}}({{item.bank_code|end_code}})</view>
								<view class="tick iconfont icon-dagou" :class="item.tick ? 'tickColor' : ''"></view>
							</view>
						</block>
						<view class="bank_list">
							<view class="icon">
								<image src="/static/bank04.png" mode="widthFix"></image>
							</view>
							<view class="text" @click="$r('/pages/personalcenter/bank/add')">添加新卡</view>
							<view class="arrow iconfont icon-xiangyou1"></view>
						</view>
						<view class="pupu_menu sub" @click="sure_bank()">确认</view>
					</view>
					
				</view>
			</view>
			
		</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id : 0,
				pupu:false,
				total_money: '',
				select:'',
				page:1,
				scrrol:false,
				info:'',
				month_num : 0,
				checked:false,
				pupuYype:false,
				plan_list : [],
				plan_sure : 0,
				first_stage : {},
				bank_list : [],
				cur_bank : {},
				bank:[
					{
						icon:'/static/bank01.png',
						name:'工商银行储蓄卡（6696）',
						tick:true,
					},
					{
						icon:'/static/bank02.png',
						name:'建设银行储蓄卡（6688）',
						tick:false,
					},
					{
						icon:'/static/bank03.png',
						name:'农业银行储蓄卡（7788）',
						tick:false,
					}
				]
			}
		},
		filters:{
			 end_code(car_code){
				let code = uni.$u.trim(car_code, 'all');
				if(code.length >= 4){
					 code = code.slice(-4);
				}
				return code;	
			}
		},
		onLoad(opt) {
            this.id = opt.id||0;
			if(opt?.sign_money){
				this.total_money = opt.sign_money;
			}
			this.initBank();
		},
		methods: {
			sign_model(){
				
				if(this.checked == false){
					this.showMsg('请先阅读并勾选协议');
					return false;
				}
				if(this.id == 0){
					this.showMsg('租赁单不存在');
					return false;
				}
				if(this.month_num == 0){
					this.showMsg('请选择分期');
					return false;
				}
				if(this.total_money <= 0){
					this.showMsg('请填写分期金额');
					return false;
				}
				if(Object.keys(this.cur_bank).length == 0){
					 this.showMsg('请选择银行');
					 return false;
				}
				uni.showModal({
					title: '签约提示',
					content: '金额和分期请检查仔细,确认签约吗？',
					success: function (res) {
						if (res.confirm) {
							this.to_sign();
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			to_sign(){
				uni.$u.throttle(this.real_sign, 800)
			},
			real_sign(){
				
				let url = this.site_url + 'api/auth/loans/sign_order_handle';
				let param = {
					loans_id : this.id,
					stage_num : this.month_num,
					loans_money : this.total_money,
					bank_id : this.cur_bank.id,
				};
				uni.showLoading({
					title: '正在签约中...',
					mask: true,
				});
				helper.Timer.start();
				this.areq(url,param,'POST').then(res=>{
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(3000);
					// console.log(left_time);
					setTimeout(() => {
						uni.hideLoading();
						if (res.code == 1) {
							this.showMsg('恭喜签约成功', 2000, true, 'success');
							setTimeout(() => {
								this.backTo();
							}, 1200)
						} else {
							this.showMsg(res.msg);
						}
								
					}, left_time);
				})
				
			},
			initBank(){
				let url = this.site_url + 'api/auth/member/bank_list';
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.bank_list = res.data;
						this.cur_bank = res.data[0];
					}
				})
			},
			to_plan_sure(){
				this.plan_sure = 1;
				this.pupu = false;
			},
			sure_stage_num(){
				if(this.id == 0){
					this.showMsg('租赁单不存在');
					return false;
				}
				if(this.month_num == 0){
					this.showMsg('请选择分期');
					return false;
				}
				if(this.total_money <= 0){
					this.showMsg('请填写分期金额');
					return false;
				}
				uni.$u.throttle(this.real_sure_stage, 800)
			},
			real_sure_stage(){
				let param = {
					loans_id : this.id,
					stage_num : this.month_num,
					loans_money : this.total_money
				};
				let url = this.site_url + 'api/auth/loans/stage_plan_calc';
				this.areq(url,param,'POST').then(res=>{
					if(res.code == 1){
						this.pupu = false;
						this.plan_list = res.data;
						this.first_stage = res.data[0];
					}else{
						this.showMsg(res.msg);
					}
					
					
				})
				
				
				
			},
			close_pupu(){
				this.pupu = false;
			},
			show_pupu(){
				this.pupu = true;
			},
			sure_bank(){
				if(Object.keys(this.cur_bank).length == 0){
					this.showMsg('请选择银行');
					return false;
				}
				this.pupu = false;
			},
			setBank(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.bank_list.forEach(item => {
					this.$set(item, 'tick', 0);
				});
				
				this.cur_bank = this.bank_list[index];
				that.bank_list[index].tick = 1;
			},
			openPupu(e){
				let that = this;
				let type = e.currentTarget.dataset.type;
				if(type == 1 && this.plan_list.length == 0){
					this.showMsg('请先选择期数');
					return false;
				}
				if(type == 2 && this.bank_list.length == 0){
					this.showMsg('请先选择银行');
					return false;
				}
				that.pupuYype = type;
				that.closePupu();
			},
			setPeriod(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				let num = e.currentTarget.dataset.num;
				that.select = index;
				this.month_num = num;
				
			},
			closePupu(){
				let that = this;
				that.pupu = !that.pupu;
			},
			checkedAuto(){
				let that = this;
				that.checked = !that.checked;
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
		
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	.bg_box{
		width: 100%;
		position: relative;
	}
	.bg_box .bg01{
		width: 100%;
	}
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	.details_box {
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}
	.details_boxNo{
		padding: 0vw 4%;
	}
	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}
	.details_box .input_box{
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #FC5D20;
		height: 15vw;
	}
	.details_box .input_box .m{
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		margin-top: 2vw;
	}
	
	.details_box .input_box input{
		font-size: 6vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}
	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}
	
	.details_box .list .name {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
	}
	
	.details_box .list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.details_box .list .text .i{
		width: 5vw;
		margin-right: 1vw;
	}
	
	.details_box .list .text .i image{
		width: 100%;
	}
	
	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
		font-weight: bold;
	}
	
	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
	}
	
	.rule_list{
		width: 100%;
		margin: 5vw auto 0;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}
	
	.pupu_box {
		width: 100%;
		height: 100%;
	   /* background-color: rgba(0, 0, 0, 0.3);
	 	position: fixed;
		left: 0;
		top: 0; */
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	
	.pupu_box .pupu_show {
		width: 100%;
		background-color: #fff;
		border-radius: 4vw 4vw 0 0;
		padding: 5vw 4vw;
		position: relative;
	}
	
	.pupu_box .pupu_show .pupu_title{
		font-size: 4.5vw;
		color: #333;
		text-align: center;
		font-weight: bold;
		padding-bottom: 5vw;
	}
	
	.pupu_box .pupu_show .close{
		font-size: 4vw;
		color: #333;
		text-align: center;
		position: absolute;
		right: 5vw;
		top: 5vw;
	}
	
	.pupu_box .pupu_show .pupu_value{
		max-height: 70vh;
		width: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
		
	}
	
	.pupu_content{
		width: 100%;
		height: 100%;
	}
	
	.pupu_menu{
		width: 100%;
		height: 13vw;
		border-radius: 13vw;
		line-height: 13vw;
		text-align: center;
		background-color: #FC5D20;
		color: #fff;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 8vw;
		font-weight: bold;
	}
	
	.pupu_period{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.pupu_period::after {
		flex: auto;
		content: '';
	}
	
	.pupu_period .period{
		width: 30.66666666%;
		height: 10vw;
		line-height: 10vw;
		text-align: center;
		border-radius: 2vw;
		border: 1px solid #CDCDCD;
		margin-left: 4%;
		margin-bottom: 4%;
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
	}
	
	.pupu_period .period:nth-child(3n + 1){
		margin-left: 0;
	}
	
	.periodColor{
		color: #FC5D20 !important;
		border: 1px solid #FC5D20 !important;
		background-color: #FFFCF9 !important;
	}
	
	.schedule_box {
		width: 100%;
	}
	
	.schedule_list {
		width: 100%;
		display: flex;
		position: relative;
	}
	
	.schedule_list .name_box{
		width: 20vw;
		min-height: 18vw;
	}
	
	.schedule_list .name_box .name{
		font-size: 4.3vw;
		color: #333;
		line-height: 6vw;
		font-weight: bold;
		text-align: center;
	}
	
	.schedule_list .name_box .time{
		font-size: 3.4vw;
		color: #808080;
		text-align: center;
	}
	
	.schedule_list .line_box {
		height: 100%;
		width: 5vw;
		position: absolute;
		left: 20vw;
		top: 0;
	}
	
	.schedule_list .line_box .round {
		margin: 0 auto;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: 1vw;
		border: 1vw solid #FC5D20;
		width: 4vw;
		height: 4vw;
	}
	
	.schedule_list .line_box .close {
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 auto;
		background-color: #E9E9E9;
		margin-top: 1vw;
		color: transparent;
		border-radius: 50%;
	}
	
	.schedule_list .line_box .line {
		width: 1px;
		margin: 0 auto;
		height: calc(100% - 1.25vw);
		background-color: #CBCBCB;
	}
	
	
	.schedule_box .schedule_list:last-child .line_box .line {
		display: none;
	}
	
	.schedule_list .text_box {
		flex: 1;
		min-height: 18vw;
		padding-left: 8vw;
	}
	
	.schedule_list .text_box .title {
		font-size: 3.6vw;
		color: #C0C0C0;
		margin-bottom: 1vw;
	}
	
	.schedule_list .text_box .value {
		font-size: 4.3vw;
		color: #333;
		line-height: 6vw;
		font-weight: bold;
	}
	
	
	.schedule_list .text_box .rule {
		font-size: 3.3vw;
		color: #FF4246;
		margin-top: 1vw;
	}
	
	.schedule_list .text_box .time {
		font-size: 3.4vw;
		color: #808080;
		margin-top: 1vw;
	}

	
	.schedule_box .schedule_list:last-child .text_box {
		min-height: auto;
	}
	
	.bank_list{
		width: 100%;
		display: flex;
		align-items: center;
		height: 15vw;
	}
	
	.bank_list .icon{
		width: 7vw;
		margin-right: 3vw;
	}
	
	.bank_list .icon image{
		width: 100%;
	}
	
	.bank_list .text{
		flex: 1;
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}
	
	.bank_list .tick{
		font-size: 6vw;
		color: transparent;
	}
	
	.bank_list .arrow{
		font-size: 4vw;
		color: #A5A7AD;
	}
	
	.tickColor{
		color: #FC5D20 !important;
	}
</style>
